<template>
	<view class="content">
		<!-- <navigator url="../wxlogin/wxlogin">
			<button>登录</button>
		</navigator> -->
		<view class="info">
			<view class="avatar">
				<image src="/static/tabbar/my.png" mode=""></image>
			</view>
			<view class="user_name">
				<view class="nick_name">
					未登录
				</view>
				<view class="phone_number">
					15345637465
				</view>
			</view>
			<view class="setting">
				设置
			</view>
		</view> 
		<view class="function">
			<view class="classfy" v-for="item,index in functionList" :key="index">
				<view class="lf">
					<view class="icon">
						<image :src="item.iconPath" mode=""></image>
					</view>
					<view class="des">
						{{item.title}}
					</view>
				</view>
				<view class="more">
					<u-icon name="arrow-right" color="#aaa" size="16"></u-icon>
				</view>
			</view>
		</view>
		<view class="out_sale">
			<view class="diadong">
				<image src="/static/diandong.png" mode=""></image>
			</view>
			<view class="font">
				<view class="title">
					成为配送员
				</view>
				<view class="des_title">
					课余时间赚零钱
				</view>
			</view>
		</view>
		<navigator url="/SubPages/wxlogin/wxlogin">
			<view class="login">一键登录</view>
		</navigator>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				functionList: [
					{	
						iconPath:'/static/order.png',
						title:'我的订单'
					},
					{
						iconPath:'/static/commit.png',
						title:'我的评论'
					},
					{
						iconPath:'/static/send.png',
						title:'我的发布'
					},
					{
						iconPath:'/static/jiedan.png',
						title:'我的接单'
					},
					{
						iconPath:'/static/address.png',
						title:'常备地址'
					},
				]
			};
		}
	}
</script>

<style lang="scss">
	// page {
	// 	background-color: #f4f4f4;
	// }
.content {
		.info {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding:50rpx 30rpx ;
			border-bottom: 1rpx solid #f4f4f4;
			// background-color: #fff;
			.avatar {
				width: 120rpx;
				height: 120rpx;
				border: 1rpx solid #ccc;
				border-radius: 50%;
				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
			.user_name {
				width: 60%;
				.phone_number {
					color: #aaa;
					margin-top: 10rpx;
				}
			}
			.setting {
				color: #F5AC3C;
			}
		}
		.function {
			.classfy {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx 50rpx;
				border-bottom: 1rpx solid #f4f4f4;
				font-size: 26rpx;
				.lf {
					display: flex;
					align-items: center;
					.icon {
						display: flex;
						align-items: center;
						justify-content: center;
						image {
							width: 50rpx;
							height: 50rpx;
						}
					}
					.des {
						margin-left: 50rpx;
					}
				}
				.more {
					
				}
			}
		}
		.out_sale {
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #FEF5E7;
			margin: 20rpx 30rpx;
			border-radius: 15rpx;
			padding: 20rpx;
			.diadong {
				margin-right: 30rpx;
				image {
					width: 100rpx;
					height: 100rpx;
				}
			}
			.font {
				.title {
					font-size: 36rpx;
					color: #F5AC3C;
				}
				.des_title {
					margin-top: 15rpx;
					color: #aaa;
				}
			}
		}
		.login {
			background-color: #F5AC3C;
			text-align: center;
			padding: 20rpx 30rpx;
			margin:30rpx;
			border-radius: 15rpx;
			color: #fff;
		}
	}
</style>
